<template>
  <div v-loading="loading" class="wzchart">
    <div class="bg">
      <div class="titles"><span>问政趋势</span><span class="a"><i v-for="(item,idx) in type"
                                                              :class="[item.key==checktype?'cur':'']"
                                                              @click="checkType(item.key)"
      >{{ item.name }}</i></span></div>
      <div class="echarts" id="wz-echart"></div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { getWzdata } from '@/api/data'

export default {
  name: 'Pvchart',
  data() {
    return {
      loading: true,
      data: [],
      checktype:'d',
      show: [],
      type: [
        { name: '日', key: 'd' },
        { name: '月', key: 'm' },
        { name: '年', key: 'y' },
      ]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    checkType(key){
      this.loading = true
      getWzdata({type:key}).then(r => {
        this.loading = false
        this.checktype = key
        if (r.code == 200) {
          this.initChart(r.data)
        }
      })
    },
    getData() {
      getWzdata().then(r => {
        this.loading = false
        if (r.code == 200) {
          this.initChart(r.data)
        }
      })
    },
    initChart(data) {

      let options = {

        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['新增留言', '新增办结', '新增用户']
        },
        grid: {
          left: '50px',
          right: '0',
          top: '30px',
          bottom: '50px'
        },
        xAxis: {
          type: 'category',
          data: data.newthread.map(item => {
            return item.HOUR
          })
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: function(value, index) {
              // 将数值转换为千位，并添加'K'
              if (value >= 1000) {
                return (value / 1000).toFixed(0) + 'K'
              } else {
                return value
              }
            }
          }
        },
        series: [
          {
            name: '新增留言',
            type: 'line',
            stack: 'Total',
            smooth: true,
            showSymbol: false,
            data: data.newthread.map(item => {
              return item.COUNT
            })
          },
          {
            name: '新增办结',
            type: 'line',
            stack: 'Total',
            smooth: true,
            showSymbol: false,
            data: data.newreply.map(item => {
              return item.COUNT
            })
          },
          {
            name: '新增用户',
            type: 'line',
            stack: 'Total',
            smooth: true,
            showSymbol: false,
            data: data.newuser.map(item => {
              return item.COUNT
            })
          }
        ]
      };
      this.$nextTick(() => {
        let chart = echarts.init(document.getElementById('wz-echart'), null, { devicePixelRatio: 2 })
        chart.setOption(options)
      })
    }
  }
}
</script>
<style lang="scss" scoped>

.wzchart {
  height: 260px;
  display: flex;
  overflow: hidden;
  .echarts {
    width: 100%;
    height: 220px;
  }
}

::v-deep .bg {
   width: 100%;
  .titles {
    align-items: baseline;
    .a {
      display: flex;
      position: relative;
      top: -10px;
      right: -10px;
      z-index: 100;

      i {
        margin-right: 10px;
        font-size: 12px;
        font-style: normal;
        font-weight: normal;
        cursor: pointer;
        line-height: 20px;
        color: #666;

        &.cur {
          font-weight: bolder;
          color: rgb(64, 158, 255);
        }
      }
    }
  }
}
</style>
